<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .grid {
      margin: auto;
      width: 530px;
      text-align: center;
    }
    .grid table {
      border-top: 1px solid #C2D89A;
      width: 100%;
      border-collapse: collapse;
    }
    .grid th,td {
      padding: 10;
      border: 1px dashed #F3DCAB;
      height: 35px;
      line-height: 35px;
    }
    .grid th {
      background-color: #F3DCAB;
    }
    .grid .book {
      padding-bottom: 10px;
      padding-top: 5px;
      background-color: #F3DCAB;
    }
    .grid .total {
      height: 30px;
      line-height: 30px;
      background-color: #F3DCAB;
      border-top: 1px solid #C2D89A;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="grid">
      <div>
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <label for="id">
              编号：
            </label>
            <input type="text" id="id" v-focus v-model="id" :disabled="true">
            <label for="name">
              名称：
            </label>
            <input type="text" id="name" v-model.lazy="name">
            <button @click="addBooks" :disabled="subFlag">提交</button>
          </div>
        </div>
      </div>
      <div class="total">
        <span>图书总数：</span>
        <span>{{ total }}</span>
      </div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,i) in books">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.date | datefm('yyyy-MM-dd') }}</td>
            <td>
              <a href="" @click.prevent="editBooks(item)">修改</a>
              <span>|</span>
              <a href="" @click.prevent="delBooks(item.id)">删除{{ i }}</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script src="js/axios.js"></script>
  <script src="js/time.js"></script>
  <script type="text/javascript">
    Vue.directive('focus',{
      inserted (el) {
        el.focus()
      }
    })
    Vue.filter('datefm',function(time,format){
      return dateFormat(time,format)
    })
    // 配置公共的域名
    axios.defaults.baseURL = 'http://localhost:3000'
    // 利用响应拦截器配置返回的数据
    axios.interceptors.response.use(function(res){
      return res.data
    })
    var vm = new Vue({
      el: '#app',
      data: {
        id:5,
        name:'',
        flag:false,
        subFlag:false,
        books: []
      },

      created () {
        this.getBooks()
      },

      methods: {
        // 利用axios获取book数据
        // 利用async修饰函数
        async getBooks () {
          // 利用await修饰promise实例对象
          this.books = await axios.get('/books')
        },
        // 添加图书或者修改图书
        async addBooks () {
          if(this.flag){
            // this.flag true 修改
            var data = await axios.put('books/'+this.id,{
              name:this.name
            })
            console.log(data)
            // 如果返回的status:200代表修改成功
            if(data.status==200){
              this.getBooks()
            }
            this.flag = false
          }else{
            // this.flag false 添加
            var data = await axios.post('/books',{name:this.name})
            console.log(data)
            // 如果data.status==200 代表添加成功
            if(data.status==200){
              this.getBooks()
            }
            
          }
          this.name = this.id = ''
          
        },

        // 修改图书
        async editBooks (item) {
          var data = await axios.get('books/'+item.id)
          console.log(data)
          this.id = data.id
          this.name = data.name
          this.flag = true
        },

        async delBooks (id) {
          var data = await axios.delete('books/'+id)
          console.log(data)
          // 如果status:200，删除成功
          if(data.status==200){
            this.getBooks()
          }
        }
      },

      watch: {
        name:async function(val){
          // console.log(val)
          // this.subFlag = this.books.some(item=>item.name == this.name)
          var data = await axios.get(`/books/book/${val}`)
          // 如果返回的status:2 不存在
          // 如果返回的status:1 存在
          if(data.status==2){
            this.subFlag = false
          }else{
            this.subFlag = true
          }
        }
      },

      computed: {
        total:function(){
          return this.books.length
        }
      }
    });
  </script>
</body>
</html>
